<template>
	<div class="page-wrap">
		<div class="page-inner">
			<div class="page-ctx-wrap">
				<div class="input-items">
					<div class="section-title">商品编码设置</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label required">商品编码</div>
							<div class="val">
								<el-input v-model="form.snRule" placeholder=""> </el-input>
							</div>
						</div>

					</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label hidden">说明</div>
							<div class="val">
								<div class="input-tip">
									说明：前缀由管理员自主设置， 000000为自动生成序号位数。
									此处设置本系统的编码规则，您可以在创建产品的时候自主设置商品编码
								</div>
							</div>
						</div>
					</div>

					<div class="section-title">商品设置</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label required">启用商品图片</div>
							<div class="val">
								<el-radio-group v-model="form.ifImage" class="column">
									<el-radio :label="1">启用</el-radio>
									<el-radio :label="0">
										不启用
									</el-radio>
								</el-radio-group>
							</div>
						</div>
					</div>

					<div class="input-item">
						<div class="input-box">
							<div class="label required">启用商品品牌</div>
							<div class="val">
								<el-radio-group v-model="form.ifBrand" class="column">
									<el-radio :label="1">启用</el-radio>
									<el-radio :label="0">
										不启用
									</el-radio>
								</el-radio-group>
							</div>
						</div>
					</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label hidden">说明</div>
							<div class="val">
								<div class="input-tip">
									启用商品品牌后，商品将增加品牌选项，且商品品牌将作为商品筛选条件。
								</div>
							</div>
						</div>
					</div>


					<div class="input-item">
						<div class="input-box">
							<div class="label required">启用商品重量</div>
							<div class="val">
								<el-radio-group v-model="form.ifWeight" class="column">
									<el-radio :label="1">启用</el-radio>
									<el-radio :label="0">
										不启用
									</el-radio>
								</el-radio-group>
							</div>
						</div>
					</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label hidden">说明</div>
							<div class="val">
								<div class="input-tip">
									启用商品重量字段后，订单商品清单中将显示商品重量字段，且将按此字段计算重量合计。
								</div>
							</div>
						</div>
					</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label required">重量单位</div>
							<div class="val">
								<el-input v-model="form.weight" placeholder="">
								</el-input>
							</div>
						</div>
					</div>

					<div class="input-item">
						<div class="input-box">
							<div class="label required">启用自定义字段 {{ form.ifAddrows }}</div>
							<div class="val">
								<el-radio-group v-model="form.ifAddrows" class="column">
									<el-radio :label="1">启用</el-radio>
									<el-radio :label="0">
										不启用
									</el-radio>
								</el-radio-group>
							</div>
						</div>
					</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label hidden">说明</div>
							<div class="val">
								<div class="input-tip">
									启用本功能后，所有商品均会增加自定义字段内容，最多支持10个自定义字段。
								</div>
							</div>
						</div>
					</div>

					<div class="panel-params" v-if="form.ifAddrows == 1">
						<div class="input-item">
							<div class="input-box">
								<div class="label required">参数列表</div>
								<div class="val">
									<div class="table-sec">
										<el-table :data="dataList_addrows" stripe border>
											<template v-for="(item, index) in tableColumns_addrows">
												<el-table-column :key="index + item.prop" :prop="item.prop"
													:label="item.label" :width="item.width">
													<template slot-scope="scope">
														<div class="id-text">
															<el-input v-model="scope.row[item.prop]"> </el-input>
														</div>
													</template>
												</el-table-column>
											</template>
											<el-table-column fixed="right" label="操作" width="120">
												<template slot-scope="scope">
													<div data-title="列表操作" class="row-actions-box">
														<el-button @click="do_delete_addrows(scope.row, scope)"
															type="text">删除</el-button>
													</div>
												</template>
											</el-table-column>
										</el-table>
										<div class="loop-add">
											<el-button type="primary" @click="do_add_addrows()"> 增加 </el-button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>




					<div class="input-item">
						<div class="input-box">
							<div class="label required">启用商品标签</div>
							<div class="val">
								<el-radio-group v-model="form.ifTags" class="column">
									<el-radio :label="1">启用</el-radio>
									<el-radio :label="0">
										不启用
									</el-radio>
								</el-radio-group>
							</div>
						</div>
					</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label hidden">说明</div>
							<div class="val">
								<div class="input-tip">
									管理您的商品标签，最多支持5个标签。
								</div>
							</div>
						</div>
					</div>


					<div class="tag-panel" v-if="form.ifTags == 1">
						<div class="input-item">
							<div class="input-box">
								<div class="label required">标签列表</div>
								<div class="val">
									<div class="table-sec">
										<el-table :data="dataList_tags" stripe border>
											<template v-for="(item, index) in tableColumns_tags">
												<el-table-column :key="index + item.prop" :prop="item.prop"
													:label="item.label" :width="item.width">
													<template slot-scope="scope">
														<div class="id-text">
															<el-input v-model="scope.row[item.prop]"> </el-input>
														</div>
													</template>
												</el-table-column>
											</template>
											<el-table-column fixed="right" label="操作" width="120">
												<template slot-scope="scope">
													<div data-title="列表操作" class="row-actions-box">
														<el-button @click="do_delete_tags(scope.row, scope)"
															type="text">删除</el-button>
													</div>
												</template>
											</el-table-column>
										</el-table>
										<div class="loop-add">
											<el-button type="primary" @click="do_add_tags()"> 增加 </el-button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>


				</div>
			</div>
		</div>

		<div class="footer-actions">
			<el-button type="primary" @click="toSave()"> 保存 </el-button>
		</div>

	</div>
</template>

<script>
import {
	mapState
} from "vuex";
export default {
	name: "news",
	components: {},
	data() {
		return {
			form: {
				//
				ifImage: "",
				ifBrand: "",
				ifWeight: "",
				weight: "",
				ifAddrows: "",
				ifTags: "",
				tags: "",
				showRows: "",
				snRule: "P",
			},




			//商品参数
			product_addrows_join_marker: '@_@',
			dataList_addrows: [{
				title: '',
			}],
			tableColumns_addrows: [{
				prop: "title",
				label: "参数名",
				width: "auto",
			}],
			//


			// 商品标签
			product_tags_join_marker: '@_@',
			dataList_tags: [{
				title: '',
			}],
			tableColumns_tags: [{
				prop: "title",
				label: "标签名",
				width: "auto",
			}],



			// 标签
			tagList: [],
			tagInputVisible: false,
			tagInputValue: "",
			tagInputRef: "tagInputRef",
			// 标签

		};
	},
	computed: {},
	watch: {},
	created() {
		this.setView();
	},
	mounted() { },
	methods: {
		setView() {
			this.$api({
				url: '/admin_service.php',
				method: "get",
				data: {
					action: "product_getConfig"
				},
			}).then((res) => {
				if (res.code == 200) {
					let data = res.data;
					this.form = data;

					//商品标签
					if (data.tags) {
						this.dataList_tags = data.tags.map(v => ({
							title: v
						}))
					}

					//商品参数
					if (data.addrows) {
						this.dataList_addrows = data.addrows.map(v => ({
							title: v
						}))
					}
				}
			});
		},

		toSave() {
			let tags = this.dataList_tags.filter(v => v.title).map(v => v.title.trim()).join(this.product_tags_join_marker)
			let addrows = this.dataList_addrows.filter(v => v.title).map(v => v.title.trim()).join(this.product_addrows_join_marker)
			let showRows = ''

			let params = {
				...this.form,
				tags: tags,
				addrows: addrows,
				showRows: showRows
			}


			this.$api({
				url: '/admin_service.php',
				method: "get",
				data: {
					action: "product_setConfig",
					...params,
				}
			}).then((res) => {
				alert(res)
			});
		},



		//商品标签管理
		do_delete_addrows(item, scope) {
			this.dataList_addrows.splice(scope.$index, 1);
		},
		do_add_addrows() {
			this.dataList_addrows.push({
				title: '',
			});
		},



		//商品标签管理
		do_delete_tags(item, scope) {
			this.dataList_tags.splice(scope.$index, 1);
		},
		do_add_tags() {
			this.dataList_tags.push({
				title: '',
			});
		},



		// 标签列表
		// tagClose(tag) {
		// 	this.tagList.splice(this.tagList.indexOf(tag), 1);
		// },
		// tagShowInput() {
		// 	this.tagInputVisible = true;

		// 	setTimeout(() => {
		// 		this.$nextTick(() => {
		// 			// this.$refs["tagInputRef"].$refs.input.focus();
		// 			this.$refs["tagInputRef"][0].$refs.input.focus();
		// 		});
		// 	}, 50);
		// },
		// tagInputConfirm() {
		// 	let tagInputValue = this.tagInputValue.trim();
		// 	if (tagInputValue) {
		// 		if (this.tagList.includes(tagInputValue)) {
		// 			alertErr("型号已存在！");
		// 			// return
		// 		} else {
		// 			this.tagList.push(tagInputValue);
		// 		}
		// 	}
		// 	this.tagInputVisible = false;
		// 	this.tagInputValue = "";
		// },
		// 标签列表


	},
};
</script>

<style scoped lang="less">
// .el-radio-group.column {
//   display: flex;
//   flex-direction: column;
// }

.tip-input {
	margin-left: 20px;
	display: inline-block;
	max-width: 150px;
}

.time-divider {
	margin: 0 15px;
}

.page-wrap {
	position: relative;

	.page-inner {}
}

.footer-actions {
	display: flex;
	justify-content: flex-end;
	justify-content: center;
	position: fixed;
	z-index: 100;
	bottom: 0;
	right: 0;
	left: 230px;
	padding: 10px;
	background: #fff;
	box-shadow: 0 0 1px 0 #ccc;
	// padding-right: 35px;
	margin-right: 18px;
}



.page-ctx-wrap {
	background: #fff;
	padding: 20px;
	border-radius: 6px;
	padding-bottom: 150px;
}

.section-title {
	margin-bottom: 20px;
	width: 100%;
	height: auto;
	line-height: 46px;
	background: rgb(241, 242, 245);
	padding-left: 30px;
	font-size: 16px;
	font-weight: 600;
}

.input-items {
	// .flex();
	// flex-wrap: wrap;
	padding-bottom: 0px;

	.input-item {
		margin-bottom: 20px;
		width: 100%;
		max-width: 800px;
		// width: 50%;

		&.hidden-item {
			display: none;
		}

		&:last-child {
			margin-bottom: 0;
		}

		.input-box {
			width: 100%;
			display: flex;
			align-items: flex-start;

			.label {
				height: 32px;
				line-height: 32px;
				min-width: 160px;
				min-width: 100px;
				text-align: right;
				margin-right: 40px;
				font-size: 20px;
				font-size: 14px;
				font-family: PingFang SC;
				color: #666666;

				&.required {
					position: relative;

					&:after {
						content: "*";
						color: #f00;
						position: absolute;
						right: -15px;
						top: 3px;
						// font-weight: bold;
					}
				}

				&.hidden {
					visibility: hidden
				}
			}
		}

		//输入框组
		.inputs {
			.flex();

			.date-box {
				flex: 1;
			}

			.shuru-box {
				margin-left: 20px;
				flex: 4;
			}
		}

		.val {
			flex: 2;
			font-size: 20px;
			font-family: PingFang SC;
			color: #000000;




			.shuru {
				width: 100%;
				padding-left: 20px;
				outline: none;
				height: 40px;
				background: #ffffff;
				border: 1px solid #d4d8eb;
				border-radius: 4px;
				font-size: 16px;
			}

			.form-ele {
				.el-input {
					width: 100%;
				}

				.el-select {
					width: 100%;
				}

				.el-cascader {
					width: 100%;
				}
			}

			.input-tip {
				font-size: 14px;
				font-family: PingFang SC;
				color: #666;
			}
		}
	}
}


// 标签
.tag-wrap {

	// 标签样式
	.cus-tag-item {
		margin-right: 15px;
	}

	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}

	.cus-tag-input {
		-webkit-appearance: none;
		background-color: #fff;
		background-image: none;
		border-radius: 4px;
		border: 1px solid #dcdfe6;
		box-sizing: border-box;
		color: #606266;
		display: inline-block;
		outline: 0;
		padding: 0 15px;
		width: 90px;
		height: 32px;
		line-height: 32px;
		transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

		&:focus {
			border-color: #66b1ff;
		}
	}

	// 标签样式

	.table-box {
		width: 100%;
		border-collapse: 0;
		/* table-layout: fixed; */
		border: 1px solid #eee;
		font-size: 14px;
	}

	.table-box tr {
		/* min-height: 40px; */
	}

	.table-box th {
		text-align: left;
		padding: 10px 10px;

		border-right: 1px solid #eee;
	}

	.table-box td {
		text-align: left;
		padding: 10px 10px;
		border-top: 1px solid #eee;
		border-right: 1px solid #eee;
	}

	.table-box td:nth-child(1) {
		width: 20%;
	}

	.table-box td:nth-child(2) {
		width: 80%;
	}

	.table-box .tag-item {
		cursor: pointer;
		outline: none;
		user-select: none;
		margin-right: 10px;
		display: inline-flex;
		align-items: center;
		color: #333;
	}

	.table-box .tag-item:before {
		content: "";
		width: 20px;
		height: 20px;
		display: inline-block;
		background-image: url("https://changkun.dx.hdapp.com.cn/erp/images/check-0.png");
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		margin-right: 3px;
	}

	.table-box .tag-item.checked:before {
		background-image: url("https://changkun.dx.hdapp.com.cn/erp/images/check-1.png");
	}
}



.loop-add {
	margin-top: 20px;
	margin-bottom: 40px;
}
</style>